<template>
    <div class="example2-wrapper">
        <div class="inner">
            <bk-dialog v-model="ratedialog.custom1.visible"
                width="500"
                @confirm="myconfirm"
                :position="ratedialog.custom1.position"
                title="评分">
                <div style="margin-left:30px">
                    <p>速度:</p>
                    <bk-rate :rate.sync="rates" :edit="true" @score="chooseRate1" :tooltips="tooltipss" :width="25" :height="25"></bk-rate>
                    <p>价格:</p>
                    <bk-rate :rate.sync="ratep" :edit="true" @score="chooseRate2" :tooltips="tooltipsp" :width="25" :height="25"></bk-rate>
                    <p>质量:</p>
                    <bk-rate :rate.sync="rateq" :edit="true" @score="chooseRate3" :tooltips="tooltipsq" :width="25" :height="25"></bk-rate>
                </div>
            </bk-dialog>
            <div style="margin-top:10px;display:inline-table">
                <span>订单号: </span>
                <bk-input :clearable="true" v-model="searchorderid" style="width:200px;"></bk-input>
                <span style="margin-left:30px">商家名: </span>
                <bk-input :clearable="true" v-model="searchmerchant" style="width:200px"></bk-input>
                <span style="margin-left:30px">完成时间: </span>
                <bk-date-picker
                    class="mr15"
                    v-model="searchtime"
                    :placeholder="'选择日期范围'"
                    :type="'daterange'"
                    :up-to-now="true"
                    @pick-success="picktime"></bk-date-picker>
                <bk-button :theme="'primary'" :title="'查询'" @click="dosearch" class="mr10">查询</bk-button>
                <bk-button :theme="'primary'" :title="'清空'" @click="myreset" class="mr10">清空</bk-button>
                <bk-button :theme="'primary'" :title="'重置'" @click="resetsearch" class="mr10">重置</bk-button>
            </div>
            <bk-table style="margin-top: 15px;"
                :data="data"
                :size="size"
                height="520"
                :pagination="pagination"
                @page-change="handlePageChange">
                <bk-table-column label="订单号" prop="orderid"></bk-table-column>
                <bk-table-column label="商家账号" prop="Merchantusername"></bk-table-column>
                <bk-table-column label="商家真名" prop="Merchantrealname"></bk-table-column>
                <bk-table-column label="状态" prop="status"></bk-table-column>
                <bk-table-column label="价格" prop="total"></bk-table-column>
                <bk-table-column label="评分情况" width="100">
                    <template slot-scope="props">
                        <bk-button class="mr10" theme="primary" text @click="showrate(props.row)" :hidden="props.row.isRated === '1'">评分</bk-button>
                        <bk-button class="mr10" theme="primary" text disabled :hidden="props.row.isRated === '0'">已评分</bk-button>
                    </template>
                </bk-table-column>
                <bk-table-column label="完成时间" prop="updatetime"></bk-table-column>
                <bk-table-column label="操作" width="100">
                    <template slot-scope="props">
                        <bk-button class="mr10" theme="primary" text @click="lookinfo(props.row)">详情</bk-button>
                    </template>
                </bk-table-column>
            </bk-table>
        </div>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            this.getallorders(1)
            return {
                ratedialog: { // 评分对话话参数
                    custom1: {
                        visible: false,
                        position: {
                            top: 100
                        }
                    }
                },
                isok: false, // 判断是否评分完毕
                rates: 0, // 速度评分
                ratep: 0, // 价格评分
                rateq: 0, // 质量评分
                tooltipss: [1, 2, 3, 4, 5], // 速度评分的显示
                tooltipsp: [1, 2, 3, 4, 5], // 价格评分的显示
                tooltipsq: [1, 2, 3, 4, 5], // 质量评分的显示
                data: [
                ],
                isSearch: false,
                searchorderid: '',
                searchmerchant: '',
                searchtime: '',
                pagination: {
                    current: 1,
                    count: 0
                }
            }
        },
        watch: {
            isok: {
                handler () {
                    if (this.isok === true) {
                        this.rateorder(this.noworder, this.rates, this.ratep, this.rateq)
                        this.isok = false
                    }
                }
            },
            searchorderid: {
                handler () {
                    const that = this
                    that.checksearch()
                }
            },
            searchtime: {
                handler () {
                    const that = this
                    that.checksearch()
                }
            },
            searchmerchant: {
                handler () {
                    const that = this
                    that.checksearch()
                }
            }
        },
        methods: {
            myconfirm () {
                if (this.rates === 0 || this.ratep === 0 || this.rateq === 0) {
                    const a = this.$bkInfo({
                        type: 'error',
                        title: '评分失败，请将三个选项都评分',
                        subTitle: '此窗口3秒后关闭',
                        showFooter: false
                    })
                    let num = 3
                    const t = setInterval(() => {
                        a.subTitle = `此窗口${--num}秒后关闭`
                        if (num === 0) {
                            clearInterval(t)
                            a.close()
                        }
                    }, 1000)
                } else {
                    this.isok = true
                }
            },
            showrate (row) {
                this.ratedialog.custom1.visible = true
                this.rates = 0
                this.ratep = 0
                this.rateq = 0
                this.noworder = row.orderid
            },
            checksearch () {
                if (this.searchorderid === '' && this.searchmerchant === '' && this.searchtime[0] === '' && this.searchtime[1] === '') {
                    this.isSearch = false
                } else {
                    this.isSearch = true
                }
            },
            resetsearch () {
                this.reload()
            },
            myreset () {
                this.searchorderid = ''
                this.searchmerchant = ''
                this.searchtime = ''
                this.isSearch = false
            },
            dosearch () {
                if (this.searchorderid === '' && this.searchmerchant === '' && this.searchtime[0] === '' && this.searchtime[1] === '') {
                    this.$bkInfo({
                        title: '请输入信息再查询'
                    })
                } else {
                    this.searchgetorder(1)
                }
            },
            handlePageChange (page) {
                this.pagination.current = page
                if (this.isSearch) {
                    this.searchgetorder(page)
                } else {
                    this.getallorders(page)
                }
            },
            searchgetorder (page) {
                const qs = require('qs')
                this.axios({
                    url: '/searchorder_customer/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        username: JSON.parse(sessionStorage.getItem('user')),
                        orderid: this.searchorderid,
                        merchant: this.searchmerchant,
                        time: JSON.stringify(this.searchtime),
                        page: page
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        if (res.data.result_data.length === 0) {
                            this.$bkInfo({
                                title: '未找到搜索内容'
                            })
                        } else {
                            this.data = []
                            this.pagination.count = res.data.num
                            for (const i in res.data.result_data) {
                                const tmp = {
                                    orderid: '',
                                    Merchantusername: '',
                                    Merchantrealname: '',
                                    status: '',
                                    total: '',
                                    updatetime: '',
                                    isRated: ''
                                }
                                tmp.orderid = res.data.result_data[i].id
                                tmp.Merchantusername = res.data.result_data[i].merchantusername
                                tmp.Merchantrealname = res.data.result_data[i].merchantrealname
                                tmp.status = res.data.result_data[i].status
                                tmp.total = res.data.result_data[i].total
                                tmp.updatetime = res.data.result_data[i].updatetime
                                tmp.isRated = res.data.result_data[i].isRated
                                this.$set(this.data, i, tmp)
                            }
                        }
                    } else {
                        this.$bkInfo({
                            title: '未找到搜索内容'
                        })
                    }
                })
            },
            rateorder (orderid, rates, ratep, rateq) {
                // rates速度评分，ratep价格评分，rateq质量评分
                const qs = require('qs')
                this.axios({
                    url: '/rateorder/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        orderid: orderid,
                        rate_speed: rates,
                        rate_price: ratep,
                        rate_quality: rateq
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '评分成功!',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.reload()
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '评分失败，请稍后再试',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            getallorders (page) {
                const qs = require('qs')
                this.axios({
                    url: '/getallordersby_cus/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        username: JSON.parse(sessionStorage.getItem('user')),
                        page: page
                    })
                }).then(res => {
                    this.data = []
                    this.pagination.count = res.data.num
                    for (const i in res.data.result_data) {
                        const tmp = {
                            orderid: '',
                            Merchantusername: '',
                            Merchantrealname: '',
                            status: '',
                            total: '',
                            updatetime: '',
                            isRated: ''
                        }
                        tmp.orderid = res.data.result_data[i].id
                        tmp.Merchantusername = res.data.result_data[i].merchantusername
                        tmp.Merchantrealname = res.data.result_data[i].merchantrealname
                        tmp.status = res.data.result_data[i].status
                        tmp.total = res.data.result_data[i].total
                        tmp.updatetime = res.data.result_data[i].updatetime
                        tmp.isRated = res.data.result_data[i].isRated
                        this.$set(this.data, i, tmp)
                    }
                })
            },
            lookinfo (row) {
                this.$router.push({
                    name: 'underway',
                    query: {
                        id: row.orderid
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>
